<template>
  <view class="bg-white">
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content">草稿箱编辑</block>
    </cu-custom>
    <view style="padding: 15px">
      <form>
        <view>
          <image
            style="width: 100rpx; height: 100rpx"
            :src="dataObj.avatar"
          ></image>
        </view>
        <view class="cu-form-group">
          <view class="title">姓名</view>
          <my-seach-select
              range-key="realname"
              value-key="id"
              v-model="userId"
              searchUrl="/sys/user/list"
              disabled
              :defaultParams="{
              jobStatus: '1,2',
              isStay: 1,
              column: 'createTime',
              order: 'desc',
              pageNo: 1,
              pageSize: -1,
              company: Auth_Company_Id,
            }"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">工号</view>
          <input
            disabled
            v-model="dataObj.workNo"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">公司</view>
          <input
            disabled
            v-model="dataObj.company_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">性别</view>
          <input
            disabled
            v-model="dataObj.sex_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">年龄</view>
          <input
            disabled
            v-model="dataObj.age"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">进厂时间</view>
          <input
            disabled
            v-model="dataObj.enterFactoryTime"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">部门</view>
          <input
            disabled
            v-model="dataObj.departIds_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <!-- <view class="cu-form-group margin-top" style="background-color: #E2E2E2;border-radius: 15px;">
					<view class="title">车间</view>
					<input disabled v-model="dataObj.workshop" placeholder="请输入" name="input"
						style="margin-left: 20px;"/>
				</view> -->
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">岗位</view>
          <input
            disabled
            v-model="dataObj.post"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">班次</view>
          <input
            disabled
            v-model="dataObj.classes"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">原楼栋</view>
          <input
            disabled
            v-model="dataObj.buildingId_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">原楼层</view>
          <input
            disabled
            v-model="dataObj.floorId_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">原宿舍</view>
          <input
            disabled
            v-model="dataObj.roomCode"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #e2e2e2; border-radius: 15px"
        >
          <view class="title">原宿舍属性</view>
          <input
            disabled
            v-model="dataObj.roomType_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">宿舍属性</view>
          <my-select
            range-key="text"
            value-key="value"
            dict-code="room_type"
            v-model="roomType"
          />
        </view>
        <!-- <view class="cu-form-group margin-top" style="background-color: #F4F4F4;border-radius: 15px;">
					<view class="title">现楼栋</view>
					<my-select range-key="text" value-key="value" dict-code="crm_dormitory_building,building_name,id"
						v-model="buildingId" />
				</view>
				<view class="cu-form-group margin-top" style="background-color: #F4F4F4;border-radius: 15px;">
					<view class="title">现楼层</view>
					<my-select range-key="text" value-key="value" dict-code="crm_dormitory_floor,floor,id"
						v-model="floorId" />
				</view>
				<view class="cu-form-group margin-top" style="background-color: #F4F4F4;border-radius: 15px;">
					<view class="title">现宿舍号</view>
					<picker @change="PickerChangeSeven" :value="indexSeven" :range="pickerSeven"
						:data-array="pickerSeven" range-key="label">
						<view class="picker" style="color: inherit;float: left;width: 100%;margin-left: 10px;">
							{{indexSeven > -1 && pickerSeven.length ? pickerSeven[indexSeven].label : '请选择'}}
						</view>
					</picker>
				</view> -->
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">楼栋/楼层/房间号</view>
          <myUniDataPicker
            ref="cascadeSelection"
            v-model="uniDataPicker"
            :buildingId="buildingId"
            :floorId="floorId"
            :roomCode="roomCode"
          />
        </view>
        <view>
          <view
            class="cu-form-group margin-top"
            style="background-color: #f4f4f4; border-radius: 15px"
          >
            <view class="title">换宿原因</view>
            <input
              v-model="changeDormReason"
              placeholder="请输入"
              name="input"
              style="margin-left: 20px"
            />
          </view>
          <view
            class="cu-form-group margin-top"
            style="background-color: #f4f4f4; border-radius: 15px"
          >
            <view class="title">备注</view>
            <input
              v-model="remark"
              placeholder="请输入"
              name="input"
              style="margin-left: 20px"
            />
          </view>
        </view>
      </form>
      <view
        style="
          display: flex;
          margin-top: 15px;
          justify-content: space-between;
          align-items: center;
        "
      >
        <view
          @click="submit"
          style="
            padding: 30rpx 110rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;
            background-color: rgba(30, 94, 255, 1);
            border-radius: 30rpx;
            color: #ffffff;
          "
        >
          提交审核
        </view>
        <view
          @click="save"
          style="
            padding: 30rpx 110rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;
            border-radius: 30rpx;
            background-color: rgba(255, 173, 4, 1);
            color: #ffffff;
          "
        >
          保存
        </view>
      </view>

      <uni-popup ref="submitFlag" background-color="#fff" :mask-click="false">
        <view
          style="
            text-align: center;
            background-color: #ffffff;
            padding: 11rpx;
            width: 580rpx;
            height: 470rpx;
            border-radius: 42rpx;
          "
        >
          <view>
            <view class="submit-item">
              <image class="submit-icon" src="@/static/duihaoblue.png" />
            </view>
            <view style="margin-top: 28rpx">
              <text class="submit-text">换宿申请已经提交</text>
            </view>
            <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx">
              <text>已提醒审核人员进行审核</text>
            </view>
            <button
              @click="sureOne"
              style="
                border-radius: 20rpx;
                background-color: rgba(69, 145, 254, 1);
                color: rgba(255, 255, 255, 1);
                width: 300rpx;
                margin-top: 27rpx;
              "
            >
              确定
            </button>
          </view>
        </view>
      </uni-popup>
      <uni-popup ref="draftsFlag" background-color="#fff" :mask-click="false">
        <view>
          <view
            style="
              text-align: center;
              background-color: #ffffff;
              padding: 11rpx;
              width: 580rpx;
              height: 470rpx;
              border-radius: 42rpx;
            "
          >
            <view class="submit-item">
              <image class="submit-icon" src="@/static/drafts.png" />
            </view>
            <view style="margin-top: 28rpx">
              <text class="submit-text">已保存进草稿箱</text>
            </view>
            <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx">
              <text>您可以进入草稿箱查看</text>
            </view>
            <button
              @click="sureThree"
              style="
                border-radius: 20rpx;
                background-color: rgba(69, 145, 254, 1);
                color: rgba(255, 255, 255, 1);
                width: 300rpx;
                margin-top: 27rpx;
              "
            >
              确定
            </button>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      id: Math.floor(Math.random() * 10000000000000000000) + Date.now(),
      userId: "",
      uniDataPicker: "",
      dataObj: {
        enterFactoryTime: "",
      },
      indexSeven: -1,
      pickerSeven: [],
      buildingId: "",
      floorId: "",
      roomCode: "",
      roomType: "",
      changeDormReason: "",
      remark: "",
      Auth_Company_Id: ""
    };
  },
  mounted() {
    this.Auth_Company_Id = uni.getStorageSync("Auth_Company_Id");
  },
  async onLoad(options) {
    this.id = options.id;
    this.userId = options.userId;
    if (options.dataObj) {
      let item = JSON.parse(options.dataObj);
      this.buildingId = item.buildingId;
      this.floorId = item.floorId;
      this.roomCode = item.roomCode;
      this.roomType = item.roomType;
      // await this.getPickerSevenData();
      // console.log(this.pickerSeven)
      // const foundIndex = this.pickerSeven.findIndex(pickerItem => pickerItem.key === item.roomCode);
      // // 如果找到了对应的值，设置选中项的索引
      // if (foundIndex !== -1) {
      // 	this.indexSeven = foundIndex;
      // 	this.roomCode = this.pickerSeven[foundIndex];
      // }
      // this.indexSeven = item.roomCode
      this.getPickerSevenData();
      this.getDetail();
    }
  },
  // created(){
  // 	this.getDetail()
  // },
  watch: {
    userId: {
      immediate: true,
      handler(val, old) {
        console.log("dataObject.userId值变化");
        console.log(val);
        console.log(old);
        this.userId = val;
        if (this.userId != "") {
          this.queryUserByUserId();
        }
      },
    },
    // async floorId(val, old) {
    // 	await this.getPickerSevenData();
    // },
    // async buildingId(val, old) {
    // 	await this.getPickerSevenData();
    // },
    roomType: {
      immediate: true,
      handler(val, old) {
        if (this.$refs.cascadeSelection) {
          this.$refs.cascadeSelection.getCascadeData(val);
          setTimeout(() => {
            this.$refs.cascadeSelection.setDataValue(this.roomCode);
          }, 500);
        }
      },
    },
    uniDataPicker: {
      immediate: true,
      handler(val, old) {
        if (val.length > 0) {
          this.buildingId = val[0].value;
          this.floorId = val[1].value;
          this.roomCode = val[2].value;
        }
      },
    },
  },
  computed: {},
  methods: {
    getDetail() {
      this.$http
        .get(
          "/crm_dormitory_change_application/crmDormitoryChangeApplication/queryDetail/" +
            this.id
        )
        .then((res) => {
          if (res.data.success) {
            this.buildingId = res.data.result.buildingId;
            this.floorId = res.data.result.floorId;
            this.roomCode = res.data.result.roomCode;
            this.roomType = res.data.result.roomType;
            this.changeDormReason = res.data.result.reason;
            this.remark = res.data.result.remark;
            this.$refs.cascadeSelection.setDataValue(res.data.result.roomCode);
          }
        });
    },
    queryUserByUserId() {
      this.$http
        .get("/crm_user/crmUser/queryById", {
          params: {
            id: this.userId,
          },
        })
        .then((res) => {
          if (res.data.success) {
            const result = res.data.result;
            this.dataObj = {
              ...result,
              enterFactoryTime: result?.enterFactoryTime
                ? result.enterFactoryTime?.replace(/\-/g, "/")
                : "",
            };
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    RadioChange(e) {
      this.dataObj.sex_dictText = e.detail.value;
    },
    async getPickerSevenData() {
      let params = {
        buildingId: this.buildingId,
        floorId: this.floorId,
      };
      if (this.buildingId !== "" && this.floorId !== "") {
        const res = await this.$http.get(
          "/crm_dormitory_room/crmDormitoryRoom/list",
          {
            params,
          }
        );
        if (res.data.success) {
          let dataList = res.data.result.records.map((item) => ({
            key: item.id,
            label: item.roomCode,
          }));

          this.pickerSeven = dataList;
        }
      }
    },
    PickerChangeSeven(e) {
      this.indexSeven = e.detail.value;
      this.roomCode = this.pickerSeven[e.detail.value].key;
    },
    submit() {
      this.$http
        .put(
          "/crm_dormitory_change_application/crmDormitoryChangeApplication/edit",
          {
            approvalStatus: "1",
            buildingId: this.buildingId,
            floorId: this.floorId,
            roomCode: this.roomCode,
            roomType: this.roomType,
            reason: this.changeDormReason,
            remark: this.remark,
            id: this.id,
            userId: this.userId,
          }
        )
        .then((res) => {
          if (res.data.success) {
            setTimeout(() => {
              this.$http
                .post(
                  "/crm_dormitory_change_application/crmDormitoryChangeApplication/submitTrial/" +
                    this.id
                )
                .then((res) => {
                  if (res.data.success) {
                    this.$refs.submitFlag.open("center");
                  } else {
                    this.$tip.toast("提交审核失败");
                  }
                })
                .catch(() => {
                  this.$tip.loaded();
                  this.$tip.toast("提交审核失败");
                });
            }, 100);
          } else {
            this.$tip.toast(res.data.message);
          }
        })
        .catch(() => {
          this.$tip.loaded();
          this.$tip.toast("提交失败");
        });
    },
    sureOne() {
      this.$refs.submitFlag.close();
      uni.navigateTo({
        url: "/pages/changeDorm/index",
      });
    },
    save() {
      this.$http
        .put(
          "/crm_dormitory_change_application/crmDormitoryChangeApplication/edit",
          {
            approvalStatus: "1",
            buildingId: this.buildingId,
            floorId: this.floorId,
            roomCode: this.roomCode,
            roomType: this.roomType,
            reason: this.changeDormReason,
            remark: this.remark,
            id: this.id,
            userId: this.userId,
          }
        )
        .then((res) => {
          if (res.data.success) {
            this.$refs.draftsFlag.open("center");
          } else {
            this.$tip.toast(res.data.message);
          }
        })
        .catch(() => {
          this.$tip.loaded();
          this.$tip.toast("提交失败");
        });
    },
    sureThree() {
      this.$refs.draftsFlag.close();
      uni.navigateTo({
        url: "/pages/changeDorm/changeDormDrafts/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
}

.blackList {
  height: 100%;
  overflow: hidden;
}

.page-search {
  padding-left: 34rpx;
  margin-bottom: 12rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 680rpx;
  height: 86rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;

  .search-left {
    width: 28rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-center {
    margin-left: 22rpx;
  }

  .search-placeholder {
    font-size: 28rpx;
    font-weight: 400;
    color: #7c7c7c;
  }
}

.filter-btn {
  width: 40rpx;
  height: 40rpx;
  margin-right: 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-content-main {
  height: calc(100% - 12rpx - 86rpx);
  border-top-left-radius: 64rpx;
  border-top-right-radius: 64rpx;
  padding: 26rpx 34rpx 0 34rpx;
}

.select-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.select {
  width: 160rpx;
  height: 74rpx;
  border-radius: 60rpx;
  background-color: #4591fe;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 48rpx;
  position: relative;

  .select-value {
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    margin-right: 18rpx;
  }

  .select-icon {
    width: 22rpx;
    height: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20rpx;
    top: 25rpx;
  }
}

.list {
  height: calc(100% - 74rpx - 20rpx);
}

.list-item {
  border-radius: 28rpx;
  background-color: #ffffff;
  padding: 26rpx 24rpx 28rpx 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 26rpx;
  position: relative;

  .list-item-leftCenter {
    display: flex;
    flex-direction: row;
  }

  .list-item-left {
    width: 86rpx;
    height: 86rpx;
    margin-right: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-center {
    .list-item-row {
      display: flex;
      flex-direction: row;
      margin-bottom: 20rpx;

      .list-item-name {
        color: #101317;
        font-size: 32rpx;
        margin-right: 16rpx;
      }

      .list-item-sex {
        width: 106rpx;
        height: 42rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-bottom-left-radius: 20rpx;
        background-color: rgba(234, 171, 78, 0.35);
        line-height: 42rpx;
        text-align: center;
        color: rgba(255, 173, 4, 1);
        font-size: 24rpx;
      }

      .list-item-row-icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .list-item-row-title,
      .list-item-row-value {
        font-size: 24rpx;
        font-weight: 400;
        color: #101317;
        line-height: 38rpx;
      }
    }
  }

  .list-item-btn {
    width: 36rpx;
    height: 36rpx;
    margin-top: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-tab {
    width: 132rpx;
    height: 56rpx;
    text-align: center;
    line-height: 56rpx;
    background-color: rgba(69, 145, 254, 0.4);
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 26rpx;
    border-bottom-left-radius: 20rpx;
  }

  .list-item-tab-text {
    font-size: 26rpx;
    color: rgba(69, 145, 254, 1);
  }
}

.nav-right-image {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15px;
}

.cu-form-group {
  background-color: transparent;
}

::v-deep {
  .cu-form-group uni-picker .picker {
    color: #ffffff;
  }

  .cu-form-group uni-picker::after {
    opacity: 0;
  }
}

.textView {
  margin-left: 25px;
  font-size: 10px;
  margin-top: 5px;
}

.listText {
  width: 148rpx;
  height: 24rpx;
  font-size: 20rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 24rpx;
}

/deep/ .uni-radio-input {
  width: 10px;
  height: 10px;
}

.submit-icon {
  width: 118rpx;
  height: 118rpx;
  margin-top: 58rpx;
}
</style>
